import React, {Component} from 'react';
import '$asset/css/admin.less';
import $ from 'jquery';
import {message, Button, Icon} from 'antd';
import {computed, observable} from 'mobx'
import {observer} from 'mobx-react'
import RegForm from '$component/admin/registeruser.jsx'
import Animate from 'rc-animate';
import {UserApi} from '$api/index'


@observer
class LoginPage extends Component {

  @observable data = {
    btnLoading: false,
    formState: true
  };

  @computed get FormData() {
    let data = $(this.refs.form).serializeArray();
    return {
      Username: data[0].value,
      Password: data[1].value
    }
  }

  handleToggleFormState = (e) => {
    e.preventDefault();
    this.data.formState = !this.data.formState;
  };

  async handleLogin() {
    try {
      this.data.btnLoading = true;
      let loginParam = {
        username: this.FormData.Username,
        password: this.FormData.Password
      };
      let Rs = await UserApi.loginIn(loginParam);
      message[Rs.data.error_code === 0 ? 'success' : 'error'](Rs.data.msg);
      this.data.btnLoading = false;
      if (Rs.data.error_code === 0) {
        setTimeout(() => {
          window.location.reload();
        }, 500);
      }
    } catch (e) {
      console.log(e)
    }
  }

  async handleKeyDown(event) {
    if (event.keyCode === 13) {
      event.preventDefault();
      let FormDom = $('.cmxform');
      let TargetDom = event.target;
      switch (FormDom.find('input').index(TargetDom)) {
        case 0:
          FormDom.find('input').eq(1).focus();
          break;
        case 1:
          await this.handleLogin();
          break;
      }
    }
  }

  renderForm() {
    return <form className="cmxform layui-form ajax-form" id="signupForm" method="post" action="/login"
                 onSubmit={this.handleLogin.bind(this)} ref="form">

      <div className="login-input clearfix">
        <div className="input-icon">
          <i className="iconfont icon-user" style={{fontSize: '20px'}}/>
        </div>
        <div className="input-box">
          <input onKeyDown={this.handleKeyDown.bind(this)} type="text" autoComplete="off" name="Username"
                 placeholder="用户名/手机号/邮箱"/>
        </div>
      </div>

      <div className="login-input clearfix" style={{marginTop: '40px'}}>
        <div className="input-icon">
          <i className="iconfont icon-mima" style={{fontSize: '24px'}}/>
        </div>
        <div className="input-box">
          <input type="password" autoComplete="off" name="Password" type="password"
                 placeholder="密码"/>
        </div>
      </div>
      <div className="login-radio">
        <a href="javascript:" onClick={this.handleToggleFormState} style={{color: '#999'}}>新用户注册</a>
      </div>
      <Button onClick={this.handleLogin.bind(this)} loading={this.data.btnLoading} type="primary"
              className="submit login-submit-btn ajax-post">
        提交
      </Button>
    </form>
  }

  render() {
    const {formState} = this.data;

    return (
      <div>
        <header className="login-header">
          <div className="header" style={{height: '80px'}}>

          </div>
        </header>

        <div className="login-body" style={{
          backgroundImage: 'url(http://47.96.30.5:8283/img/login/login-back.jpg)'
        }}>

          <div className="login-body-wrapper">

            <Animate transitionName="fadeOut">
              {
                formState
                  ? <div className="login" id="loginForm" key="loginForm">
                    <p className="login-title">账户登录</p>
                    {
                      this.renderForm()
                    }
                  </div>
                  : <div className="login" key="RegForm">
                    <p style={{marginBottom: '5px'}} className="login-title"><Icon onClick={this.handleToggleFormState}
                                                                                   type="left" theme="outlined"/> 用户注册</p>
                    <RegForm/>
                  </div>
              }
            </Animate>


          </div>

        </div>

        <footer className="login-footer">
          <div className="footer">
            © 2018 - 2099
          </div>
        </footer>
      </div>
    )
  }
}

export default LoginPage
